/**
 * @description 仿写 Vue
 * @author xfj
 */

class Vue {
    constructor(options) {
        // 1. vue 实例上属性的赋值
        this.$options = options || {};
        this.$data = this.$options.data || {};
        this.$el = typeof this.$options.el === 'string' ? document.querySelector(this.$options.el) : this.$options.el;

        // 2. 设置响应式数据
        // 2.1 将 $data 上的属性全部挂载到 vue 实例上，且设置为响应式
        this._proxyData(this.$data);
        // 2.2 将 $data 设置为响应式
		new Observable(this.$data);
		// 3. 编译模板
		new CompilerTemp(this.$el, this.$data, this.$options.methods);
    }

    _proxyData(data) {
        for(let key in data) {
            Object.defineProperty(this, key, {
                enumerable: true, // 可枚举
                configurable: true, // 可配置
                get: function() {
                    return data[key];
                },
                set: function(value) {
                    if(value !== data[key]) {
                        data[key] = value;
                    }
                }
            })
        }
    }
}
